<script setup>
	import {
		io
	} from "socket.io-client";
	import {
		useUserStore
	} from "@/stores/index.js";
	import {
		ref
	} from "vue";
	import patientInfo from "./components/patient-Info.vue";
	import notifyComp from "./components/notifyComp.vue";
	import messageComp from "./components/messageComp.vue";
	import presComp from "./components/presComp.vue";
	import rateComp from "./components/rateComp.vue";
	import roomStatusComp from "./components/roomStatusComp.vue";
    import dayjs from "dayjs";
   
	import {
		doctOrderAPI
	} from "../../apis/doct";


	const userStore = useUserStore()
	// 地址传过来的
	const props = defineProps(['orderId'])
	// 建立连接
	const socket = io('https://consult-api.itheima.net', {
		auth: {
			token: 'Bearer ' + userStore.token
		}, //传登录信息
		query: {
			orderId: props.orderId
		}, //订单id
		transports: ['websocket', 'polling'], //及支持长轮巡又支持socket
		timeout: 5000,
	})
     // 获取上次历史消息节点
    const lasttime=ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
	// 保存消息
	const mes = ref([])
	mes.value.length
	// 创建临时数组存分段消息
	// const templist=[]
	// 监听接收消息
	socket.on('chatMsgList', (res,index) => {
		console.log(res.data);
		res.data.forEach((item) => {
			console.log('接收消息',item.items);
			// 在拆包每一组消息时，先插入一条时间通知消息，作为分组分割
			// templist.push()
			mes.value.push({msgType:31,msg:{content:item.createTime}},...item.items)
		})
	})


	// 监听接收医生发来的信息
	socket.on('receiveChatMsg', (res) => {
		// console.log(res.data);
		// 修改信息已读
		socket.emit('updateMsgStatus', res.id)
		// 追加信息
		mes.value.push(res)
		// mes.value=[...mes.value,...res.data]
	})




	// 问诊订单详情
	const doctorOrder = ref([])
	const getdoctorOrder = () => {
		doctOrderAPI(props.orderId).then((res) => {
			console.log('订单详情', res.data);
			doctorOrder.value = res.data
		})
	}


	// 监听订单的状态
	socket.on('statusChange', getdoctorOrder)
    
	// 表单值 
	const txtValue = ref('')
	// 表单发送 回车事件 文字消息
	const keyDown = () => {
		console.log(txtValue.value);
		socket.emit('sendChatMsg', {
			from: userStore.userID,
			to: doctorOrder.value.id,
			msgType: 1,
			msg: {
				content: txtValue.value
			}
		})
		txtValue.value = ''
	}
	// 发送图片信息
	const ImageUptate = () => {
		uniCloud.chooseAndUploadFile({
			type: 'image',
			count: 1,
			extension: ['.jpg', 'png', 'gif'],
			success: (data) => {
				console.log(data.tempFiles);
				const picture = {
					id: data.tempFiles[0].lastModified,
					url: data.tempFiles[0].url
				}
				socket.emit('sendChatMsg', {
					from: userStore.userID,
					to: doctorOrder.value.id,
					msgType: 4,
					msg: {
						picture
					},
					
				})
			}
		})
	}



   

	getdoctorOrder()
</script>

<template>
	<view class="room-page">
		<!-- 问诊订单状态 -->
		 <room-status-comp
      :statusValue="doctorOrder.statusValue"
      :countdown="doctorOrder.countdown"
      :status="doctorOrder.status"
       > </room-status-comp>
		<scroll-view 
		refresher-enabled 
		@refresherrefresh="onrefresh"
		:refresher-triggered='isrefresh'
		refresher-background="#f2f2f2" 
		scroll-y 
		style="flex: 1; overflow: hidden">
			<view class="message-container">
				<!-- 此处将来填充更多代码... -->
				<template v-for="item in mes" :key="item.id">
					<!-- 患者信息 -->
					<patient-info v-if="item.msgType==21" :info='item.msg.consultRecord'></patient-info>

					<!-- 通知消息 31 32 33 -->
					<notifyComp v-if="[31,32,33].includes(item.msgType)" :msgtype='item.msgType'>{{item.msg.content}}</notifyComp>

					<!-- 图片文字信息1 4 -->
					<messageComp v-if="[1,4].includes(item.msgType)" :infotype='item.msgType' :info='item'></messageComp>

					<!-- 开处方 22 -->
					<presComp v-if="item.msgType==22" :info='item'></presComp>

					<!-- 评价 -->
					<rateComp v-if="[23,24].includes(item.msgType)" :OrderID='props.orderId'
						:doctorID='doctorOrder.docInfo?.id'></rateComp>
				</template>

			</view>
		</scroll-view>

		<!-- 发送消息 -->
		<view class="message-bar">
			<template v-if="true">
				<uni-easyinput v-model="txtValue" @confirm="keyDown" :clearable="false" :input-border="false"
					placeholder-style="font-size: 32rpx; color: #c3c3c5;" placeholder="问医生" />
				<view class="image-button" @click="ImageUptate">
					<uni-icons :size="40" color="#979797" type="image"></uni-icons>
				</view>
			</template>
			<button v-else class="uni-button">咨询其它医生</button>
		</view>
	</view>
</template>

<style lang="scss">
	// subpkg_consult/room/index.scss
	.room-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		overflow: hidden;
		box-sizing: border-box;
		background-color: #f2f2f2;
	}

	.message-container {
		padding: 0 30rpx 60rpx;
		overflow: hidden;
	}

	.message-bar {
		background-color: red;
		display: flex;
		padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 40rpx);
		background-color: #fff;

		:deep(.is-disabled) {
			background-color: transparent !important;
		}

		:deep(.uni-easyinput__content-input) {
			height: 88rpx;
			padding: 0 44rpx !important;
			border-radius: 88rpx;
			color: #3c3e42;
			font-size: 32rpx;
			background-color: #f6f6f6;
		}

		.image-button {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 88rpx;
			width: 88rpx;
			margin-left: 30rpx;
		}

		.uni-button {
			flex: 1;
		}
	}
</style>